@--bg-primary:40, 52, 102;
@--primary-6:71, 107, 245;
@--primary-5:98, 128, 250;
@--text-default-color:50, 65, 87;
@--text-second-color:136, 146, 181;
@--page-bg-color:242, 244, 247;
@--border-color:235, 237, 242;

// 颜色
@primary: rgb(var(--primary-6));
@second-color: #f5f5ff;
@error-color: #e95551;
@white-color: white;
@text-primary-color: @primary;
@text-default-color: rgb(var(--text-default-color));
@text-second-color: rgb(var(--text-second-color));
@text-white-color: @white-color;
@text-6-color: #666;
@text-9-color: #999;
@bg-primary: rgb(var(--bg-primary));
@page-bg-color: rgb(var(--page-bg-color));
@border-color: rgb(var(--border-color));
@border-active-color: @primary;
// 尺寸
@border-radius-10: 10px;
@border-radius-8: 8px;
@border-radius-4: 4px;

//搜索栏每项宽度
@search-node-width: 235px;
// 搜索栏时间范围选择器宽度
@search-range-width: 360px;
// 字段高度
@field-height: 32px;

body {
  color: @text-default-color;
  font-size: 14px;
  overflow: hidden;
  background-color: @page-bg-color;
  margin: 0;
  position: relative;
  --primary-6: @--primary-6;
  --primary-5: @--primary-5;
  --text-default-color: @--text-default-color;
  --text-second-color: @--text-second-color;
  --bg-primary: @--bg-primary;
  --page-bg-color: @--page-bg-color;
  --border-color: @--border-color;
}

input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
  -webkit-box-shadow: none !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

.vw-100 {
  width: 100vw;
}
.vh-100 {
  height: 100vh;
}

.animation {
  transition: all 0.5s;
}

.field-line-height {
  line-height: @field-height;
}
.text-primary-color {
  color: @text-primary-color;
}
.text-default-color {
  color: @text-default-color;
}

.text-second-color {
  color: @text-second-color;
}

.text-6-color {
  color: @text-6-color;
}
.text-9-color {
  color: @text-9-color;
}

.text-error-color {
  color: @error-color;
}
.text-white-color {
  color: @text-white-color;
}

.bg-page {
  background-color: @page-bg-color;
}
.bg-primary {
  background-color: @bg-primary;
}

.bg-white {
  background-color: @white-color;
}

.bg-none {
  background: none;
  background-color: none !important;
}
.pos-r {
  position: relative;
}
.pos-a {
  position: absolute;
}
.pos-f {
  position: fixed;
}
.border {
  border: 1px solid @border-color;
}
.border-none {
  border: none;
}
.border-left {
  border-left: 1px solid @border-color;
}
.border-right {
  border-right: 1px solid @border-color;
}
.border-top {
  border-top: 1px solid @border-color;
}
.border-bottom {
  border-bottom: 1px solid @border-color;
}

.bw-100 {
  width: 100%;
}

.bh-100 {
  height: 100%;
}

.d-block {
  display: block;
}
.d-inline {
  display: inline;
}
.d-inline-block {
  display: inline-block;
}

.d-flex-c {
  display: flex;
  flex-direction: column;
}

.d-flex-r {
  display: flex;
  flex-direction: row;
}

.d-none {
  display: none;
}
.d-shadow-gray {
  box-shadow: 0 0 20px #eff4f8;
}

.d-shadow-none {
  box-shadow: none !important;
}
// flex
@flexs: 1, 2, 3, 4, 5, 6, 7, 8, 9;

each(@flexs, {
  .flex-@{value} {
    flex: @value ;
  }
});

.flex-wrap {
  flex-wrap: wrap;
}

.flex-no-wrap {
  flex-wrap: nowrap;
}
.ai-inherit {
  align-items: inherit;
}
.ai-start {
  align-items: flex-start;
}

.ai-center {
  align-items: center;
}

.ai-end {
  align-items: flex-end;
}

.ac-start {
  align-content: flex-start;
}
.ac-center {
  align-content: center;
}
.ac-end {
  align-content: flex-end;
}

.jc-start {
  justify-content: flex-start;
}

.jc-center {
  justify-content: center;
}

.jc-end {
  justify-content: flex-end;
}

.jc-between {
  justify-content: space-between;
}

.jc-around {
  justify-content: space-around;
}

.jc-evenly {
  justify-content: space-evenly;
}

.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}
.omit-text {
  max-lines: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}

.omit-text-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 定义文本的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}
.word-wrap {
  word-break: break-all;
  word-wrap: break-word;
  white-space: break-spaces;
}
.word-nowrap {
  white-space: nowrap;
}
.cursor-pointer {
  cursor: pointer;
}
.scroll-bar-w-min {
  overflow-x: auto;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  &::-webkit-scrollbar-track {
    background-color: @page-bg-color;
  }
  &::-webkit-scrollbar-thumb {
    background-color: rgba(@primary, 0.5);
    border-radius: 6px;
  }
}

.scroll-bar-w-none {
  overflow-x: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}
.scroll-bar-h-min {
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  &::-webkit-scrollbar-track {
    background-color: @page-bg-color;
  }
  &::-webkit-scrollbar-thumb {
    background-color: rgba(@primary, 0.5);
    border-radius: 4px;
  }
}
.scroll-bar-h-none {
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}
.font-widget-400 {
  font-weight: 400;
}
.font-widget-500 {
  font-weight: 500;
}
.font-widget-600 {
  font-weight: 600;
}

.w-min {
  width: min-content;
}
.w-max {
  width: max-content;
}
.h-min {
  height: min-content;
}
.h-max {
  height: max-content;
}
// 字号 font-12 font-14 ...
// 最小 最大 宽 高 行高 w-x h-x  minw-x   maxw-x
@min:0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 14, 15, 16, 18, 20,22,24,26,28, 30, 32,34,35, 36, 40, 50, 60, 64,70, 80, 90, 100, 110, 120, 130, 135, 140, 150, 160,164,170, 180, 200,
  210, 220, 240, 260, 280, 300,320,340, 350, 360,380, 400, 440,450, 460, 500, 510, 520, 530, 600, 610, 620, 630,640, 700, 800, 900, 970,
  1000, 1100, 1200, 1300;

each(@min, {
    .font-@{value} {
      font-size: @value *1px;
      &.svg-icon {
        width: @value *1px !important;
        height: @value *1px !important;
      }
    }
   
  });

each(@min, .(@s) {
  .w-@{s} {
    width: @s *1px;
  }
  .h-@{s} {
    height: @s *1px;
  }
  .bw-@{s} {
    width: @s *1%;
  }
  .bh-@{s} {
    height: @s *1%;
  }
  .minw-@{s} {
    min-width: @s *1px;
  }
  .minh-@{s} {
    min-height: @s *1px;
  }
  .maxw-@{s} {
    max-width: @s *1px;
  }
  .maxh-@{s} {
    max-height: @s *1px;
  }
  .minbw-@{s} {
    min-width: @s * 1%;
  }
  .minbh-@{s} {
    min-height: @s *1%;
  }
  .maxbw-@{s} {
    max-width: @s *1%;
  }
  .maxbh-@{s} {
    max-height: @s *1%;
  }
  .line-height-@{s}{
    line-height: @s * 1px;
  }
  .m-@{s} {
    margin: @s *1px;
    box-sizing: border-box;
  }

  .ml-@{s} {
    margin-left: @s *1px;
    box-sizing: border-box;
  }

  .mr-@{s} {
    margin-right: @s *1px;
    box-sizing: border-box;
  }

  .mt-@{s} {
    margin-top: @s *1px;
    box-sizing: border-box;
  }

  .mb-@{s} {
    margin-bottom: @s *1px;
    box-sizing: border-box;
  }

  .p-@{s} {
    padding: @s *1px;
    box-sizing: border-box;
  }

  .pl-@{s} {
    padding-left: @s *1px;
    box-sizing: border-box;
  }

  .pr-@{s} {
    padding-right: @s *1px;
    box-sizing: border-box;
  }

  .pt-@{s} {
    padding-top: @s *1px;
    box-sizing: border-box;
  }

  .pb-@{s} {
    padding-bottom: @s *1px;
    box-sizing: border-box;
  }
  .bm-@{s} {
    margin: @s *1%;
    box-sizing: border-box;
  }

  .bml-@{s} {
    margin-left: @s *1%;
    box-sizing: border-box;
  }

  .bmr-@{s} {
    margin-right: @s *1%;
    box-sizing: border-box;
  }

  .bmt-@{s} {
    margin-top: @s *1%;
    box-sizing: border-box;
  }

  .bmb-@{s} {
    margin-bottom: @s *1%;
    box-sizing: border-box;
  }

  .bp-@{s} {
    padding: @s *1%;
    box-sizing: border-box;
  }

  .bpl-@{s} {
    padding-left: @s *1%;
    box-sizing: border-box;
  }

  .bpr-@{s} {
    padding-right: @s *1%;
    box-sizing: border-box;
  }

  .bpt-@{s} {
    padding-top: @s *1%;
    box-sizing: border-box;
  }

  .bpb-@{s} {
    padding-bottom: @s *1%;
    box-sizing: border-box;
  }

  .l-@{s} {
    left: @s *1px;
  }

  .r-@{s} {
    right: @s *1px;
  }

  .t-@{s} {
    top: @s *1px;
  }

  .b-@{s} {
    bottom: @s *1px;
  }
  .border-width-@{s} {
    border-width: @s *1px;
  }

  .btlr-@{s} {
    border-top-left-radius: @s *1px;
   }
   .btrr-@{s} {
     border-top-right-radius: @s *1px;
   }
   .bblr-@{s} {
     border-bottom-left-radius: @s *1px;
   }
   .bbrr-@{s} {
     border-bottom-right-radius: @s *1px;
    }
   .border-radius-@{s} {
     border-radius: @s *1px;
    }
});

// antd color-6
@color: {
  6: @text-6-color;
  9: @text-9-color;
  f5: @second-color;
  primary: @primary;
  danger: rgba(var(--danger-6));
  arcoblue: rgba(var(--arcoblue-6));
  green: rgba(var(--green-6));
  cyan: rgba(var(--cyan-6));
  red: rgba(var(--red-6));
  orangered: rgba(var(--orangered-6));
  magenta: rgba(var(--magenta-6));
  orange: rgba(var(--orange-6));
  gold: rgba(var(--gold-6));
  lime: rgba(var(--lime-6));
  blue: rgba(var(--blue-6));
  purple: rgba(var(--purple-6));
  pinkpurple: rgba(var(--pinkpurple-6));
  white: @white-color;
};

@opacity: {
  0: 0;
  05: 0.05;
  1: 0.1;
  2: 0.2;
  3: 0.3;
  4: 0.4;
  5: 0.5;
  6: 0.6;
  7: 0.7;
  8: 0.8;
  9: 0.9;
  10: 1;
};

each(@opacity,{
  .opacity-@{key} {
    opacity: @value;
  }
  .animation-@{key} {
    transition: all (@value) * 1s;
  }
  .animation-@{key}-easeInOut {
    transition: all (@value) * 1s ease-in-out;
  }
  .animation-@{key}-easeIn {
    transition: all (@value) * 1s ease-in;
  }
 .animation-@{key}-easeOut {
    transition: all (@value) * 1s ease-out; 
 }
})

each(@color,{
  .bg-@{key}-color {
    background-color: rgba(@value);
  }
  .text-@{key}-color {
    color: rgba(@value);
  }
  .border-@{key}-color {
    border-color: rgba(@value);
  }
  .d-shadow-@{key} {
    box-shadow: 0 5px 20px rgba(@value,0.1);
  }
  .d-shadow-btn-@{key} {
    box-shadow: 0 5px 10px rgba(@value,0.3);
  }

  each(@opacity,.(@ov,@ok,@oi){
    .bg-@{key}-color-t@{ok} {
      background-color:rgba(@value, @ov);
    }
    .text-@{key}-color-t@{ok} {
      color:rgba(@value, @ov);
    }
    .border-@{key}-color-t@{ok} {
      border-color:rgba(@value, @ov);;
    }
    .hover-bg-@{key}-color-t@{ok} {
      &:hover {
        background-color: rgba(@value, @ov);
      }
    }
  })
});
